<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="上传Excel文件快速创建任务包">
    <title>上传文件创建任务包 - EasyGem管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .upload-container {
            max-width: 650px;
            margin: 30px auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        .upload-title {
            text-align: center;
            margin-bottom: 30px;
            color: #343a40;
        }
        .upload-icon {
            font-size: 48px;
            color: #007bff;
            margin-right: 15px;
        }
        .progress {
            height: 20px;
            margin-top: 25px;
            margin-bottom: 15px;
        }
        .error-message {
            color: #dc3545;
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            background-color: rgba(220, 53, 69, 0.1);
            display: none;
        }
        .form-group label {
            font-weight: 600;
        }
        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }
        .file-input-wrapper input[type=file] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
        .custom-file-label::after {
            content: "浏览文件";
        }
        .btn-back {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="upload-container">
            <div class="upload-title">
                <i class="fa fa-cloud-upload upload-icon"></i>
                <h2>上传Excel文件创建任务包</h2>
            </div>
            
            <div class="error-message" id="errorMessage"></div>
            
            <form id="uploadForm">
                <div class="form-group">
                    <label for="taskPackageName">任务包名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="taskPackageName" name="taskPackageName" required>
                </div>
                
                <div class="form-group">
                    <label for="file">选择文件 <span class="text-danger">*</span></label>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" id="file" name="file" accept=".xlsx, .xls" required>
                        <label class="custom-file-label" for="file">选择Excel文件...</label>
                    </div>
                    <small class="form-text text-muted">支持 .xls 或 .xlsx 格式的Excel文件，最大100MB</small>
                </div>
                
                <div class="form-group">
                    <label for="accountName">账户名称（可选）</label>
                    <input type="text" class="form-control" id="accountName" name="accountName">
                </div>
                
                <div class="progress" style="display: none;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
                </div>
                
                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary btn-lg" id="uploadButton">
                        <i class="fa fa-upload mr-2"></i> 上传并创建
                    </button>
                </div>
                
                <div class="text-center btn-back">
                    <a href="javascript:history.back()" class="btn btn-outline-secondary">
                        <i class="fa fa-arrow-left mr-2"></i> 返回上一页
                    </a>
                </div>
            </form>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 显示选择的文件名
            $('.custom-file-input').on('change', function() {
                var fileName = $(this).val().split('\\').pop();
                $(this).next('.custom-file-label').html(fileName);
                
                // 文件验证
                var fileInput = document.getElementById('file');
                if (fileInput.files.length > 0) {
                    var file = fileInput.files[0];
                    
                    // 检查文件类型
                    var validExts = ['.xlsx', '.xls'];
                    var fileExt = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
                    if (!validExts.includes(fileExt)) {
                        showError('只能上传 .xls 或 .xlsx 格式的文件');
                        fileInput.value = '';
                        $(this).next('.custom-file-label').html('选择Excel文件...');
                        return false;
                    }
                    
                    // 检查文件大小（最大100MB）
                    if (file.size > 100 * 1024 * 1024) {
                        showError('文件大小不能超过100MB');
                        fileInput.value = '';
                        $(this).next('.custom-file-label').html('选择Excel文件...');
                        return false;
                    }
                    
                    // 清除错误消息
                    hideError();
                }
            });
            
            // 表单提交处理
            $('#uploadForm').on('submit', function(e) {
                e.preventDefault();
                
                // 表单验证
                if (!$('#taskPackageName').val().trim()) {
                    showError('请输入任务包名称');
                    return false;
                }
                
                if (!$('#file').val()) {
                    showError('请选择上传文件');
                    return false;
                }
                
                // 准备发送数据
                var formData = new FormData();
                formData.append('file', $('#file')[0].files[0]);
                formData.append('taskPackageName', $('#taskPackageName').val().trim());
                
                var accountName = $('#accountName').val().trim();
                if (accountName) {
                    formData.append('accountName', accountName);
                }
                
                // 显示进度条
                $('.progress').show();
                
                // 禁用提交按钮
                $('#uploadButton').prop('disabled', true).html('<i class="fa fa-spinner fa-spin mr-2"></i> 上传中...');
                
                // 发送请求
                $.ajax({
                    url: '/tasking/uploadFileAndCreatePackage',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    xhr: function() {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener('progress', function(e) {
                            if (e.lengthComputable) {
                                var percent = Math.round((e.loaded / e.total) * 100);
                                $('.progress-bar').css('width', percent + '%').attr('aria-valuenow', percent);
                            }
                        }, false);
                        return xhr;
                    },
                    success: function(response) {
                        if (response.success) {
                            // 上传成功
                            $('.progress-bar').addClass('bg-success');
                            
                            // 如果响应中有进度页面URL，则重定向
                            if (response.data.progressUrl) {
                                setTimeout(function() {
                                    window.location.href = response.data.progressUrl;
                                }, 1000);
                            } else {
                                $('#uploadButton').html('<i class="fa fa-check mr-2"></i> 上传成功').removeClass('btn-primary').addClass('btn-success');
                                
                                // 2秒后返回任务包列表页
                                setTimeout(function() {
                                    window.location.href = '/tasking/index';
                                }, 2000);
                            }
                        } else {
                            // 上传失败
                            handleError(response.message || '上传失败，请重试');
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('上传失败:', error);
                        handleError('上传失败: ' + (xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : error));
                    }
                });
            });
            
            // 显示错误消息
            function showError(message) {
                $('#errorMessage').text(message).show();
            }
            
            // 隐藏错误消息
            function hideError() {
                $('#errorMessage').hide();
            }
            
            // 处理错误
            function handleError(message) {
                $('.progress-bar').addClass('bg-danger');
                showError(message);
                $('#uploadButton').prop('disabled', false).html('<i class="fa fa-upload mr-2"></i> 重新上传').removeClass('btn-success').addClass('btn-primary');
            }
        });
    </script>
</body>
</html> 